<template>
  <div>
    <div class="app4">
      <label>用途</label>
      <el-select v-model="categoryId" clearable placeholder="选择消费方法" width="120">
        <el-option v-for="item in items" :key="item.id" :label="item.remark" :value="item.id"></el-option>
      </el-select>
      </el-form-item>
      <el-date-picker v-model="startTime" type="daterange" align="right" unlink-panels range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      <el-button type="primary" @click="sava">新增</el-button>
      <el-dialog title="新增消费流水" :visible.sync="insertDialog">
        <el-form :model="form">
          <el-form-item label="金额" :label-width="formLabelWidth">
            <el-input v-model="form.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="消费用途" :label-width="formLabelWidth">
            <el-select v-model="form.categoryId" placeholder="选择消费方法">
              <el-option v-for="item in items" :key="item.id" :label="item.remark" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-select v-model="form.userId" placeholder="请选择用户名">
              <el-option v-for="userItem in userItems" :key="userItem.id" :label="userItem.userName"
                :value="userItem.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="消费日期" :label-width="formLabelWidth">
            <el-date-picker v-model="form.comsumeTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期" default-time="12:00:00"></el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="insertDialog = false">取 消</el-button>
          <el-button type="primary" :plain="true" @click="insertOnSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div id="app5">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"></el-table-column>
        <el-table-column prop="userName" label="用户名"> </el-table-column>
        <el-table-column prop="categoryName" label="用途"> </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>
        <el-table-column prop="price" label="金额(元)"> </el-table-column>
        <el-table-column prop="comsumeTime" label="消费时间"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="updateTime" label="更新时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click='updateDalog(scope.row)'></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click='deleteDalog(scope.row)'></el-button>
          </template>

        </el-table-column>
      </el-table>
      <el-dialog title="编辑消费流水" :visible.sync="updateDialog">
        <el-form :model="form">
          <el-form-item label="金额" :label-width="formLabelWidth">
            <el-input v-model="form.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="消费用途" :label-width="formLabelWidth">
            <el-select v-model="form.categoryId" placeholder="选择消费方法">
              <el-option v-for="item in items" :key="item.id" :label="item.remark" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-select v-model="form.userId" placeholder="请选择用户名">
              <el-option v-for="userItem in userItems" :key="userItem.id" :label="userItem.userName"
                :value="userItem.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="消费日期" :label-width="formLabelWidth">
            <el-date-picker v-model="form.comsumeTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期" default-time="12:00:00"></el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateDialog = false">取 消</el-button>
          <el-button type="primary" @click="udpateOnSumbit">确 定</el-button>
        </div>
      </el-dialog>

    </div>
    <!--分页-->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[5, 7, 10, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'app4',
  data() {
    return {
      tableData: [],
      insertDialog: false,
      updateDialog: false,
      DeleteDialog: false,
      items: [],
      categoryId: '',
      userItems: [],
      currentPage: 1,
      pageSize: 10,
      totalCount: 0,
      form: {
        price: '',
        categoryId: '',
        remark: '',
        userId: '',
        comsumeTime: ''
      },
      formLabelWidth: '150px',
      id: "",
      startTime: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  mounted: function () {
    this.$http.all([
      this.$http({
        method: 'get',
        url: 'category/list',
        headers: {
          "Authorization": sessionStorage.getItem('token')
        }
      }).then(res => {
        var data = res.data.data;
        this.items = data;
      }),
      this.$http({
        method: 'post',
        url: '/userFlow/list',
        headers: {
          "Authorization": sessionStorage.getItem('token')
        }
      }).then(res => {
        var data = res.data.data.data;
        this.tableData = data;
        this.totalCount = res.data.data.totalCount;
      })
    ])


  },
  methods: {

    //分页
    getData() {
      let formData = new URLSearchParams();
      var arr = this.startTime;
      formData.append("pageIndex", this.currentPage);
      formData.append("pageSize", this.pageSize);
      if (this.categoryId != undefined && this.categoryId != 0) {
        formData.append("categoryId", this.categoryId);
      }
      if (arr != undefined && arr != '') {
        formData.append('startTime', arr[0]);
        formData.append('endTime', arr[1]);
      }
      // 这里使用axios，使用时请提前引入
      this.$http({
        method: 'post',
        url: '/userFlow/list',
        headers: {
          "Authorization": sessionStorage.getItem('token')
        },
        data: formData
      }).then(reponse => {
        // 将数据赋值给tableData
        this.tableData = reponse.data.data.data;
        // 将数据的长度赋值给totalCount
        this.totalCount = reponse.data.data.totalCount;
      })
    },
    handleSizeChange: function (val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.getData()
    },
    //新增
    sava: function () {
      this.form.price = '';
      this.form.categoryId = '';
      this.form.comsumeTime = '';
      this.form.userId = '';
      this.form.remark = '';

      this.insertDialog = true;
      this.$http.all([
        this.$http({
          method: 'get',
          url: 'category/list',
          headers: {
            "Authorization": sessionStorage.getItem('token')
          }
        }).then(res => {
          var data = res.data.data;
          this.items = data;
        }),
        this.$http({
          method: 'get', url: '/user/list', headers: {
            "Authorization": sessionStorage.getItem('token')
          }
        }).then(res => {
          var user1 = res.data.data;
          this.userItems = user1;
        })
      ])
    },
    //修改弹出穿
    updateDalog: function (row) {
      console.info(row);
      this.id = row.id;
      this.form.price = row.price;
      this.form.comsumeTime = row.comsumeTime;
      this.updateDialog = true;
      this.$http.all([
        this.$http({
          method: 'get',
          url: 'category/list',
          headers: {
            "Authorization": sessionStorage.getItem('token')
          }
        }).then(res => {
          var data = res.data.data;
          this.items = data;
          console.info(data);
          for (var i = 0; i < data.length; i++) {
            if (row.categoryName == data[i].remark) {
              this.form.categoryId = data[i].id;
            }
          }
        }),
        this.$http({
          method: 'get',
          url: '/user/list',
          headers: {
            "Authorization": sessionStorage.getItem('token')
          }
        }).then(res => {
          var user1 = res.data.data;
          this.userItems = user1;
          console.info(user1);
          for (var i = 0; i < user1.length; i++) {
            if (row.userName == user1[i].userName) {
              this.form.userId = user1[i].id;
            }
          }
        })
      ])
    },
    //删除弹出穿
    deleteDalog: function (row) {
      this.$confirm('此操作将永久删除数据，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          method: 'delete',
          url: '/userFlow/delete?id=' + row.id,
          headers: {
            "Authorization": sessionStorage.getItem('token')
          }
        })
          .then(res => {
            if (res.data.code === 200) {
              this.$message({
                showClose: true,
                message: '操作成功',
                type: 'success'
              });
              //刷新列表
              this.getData();
            } else {
              this.$message({
                showClose: true,
                message: '操作失败',
                type: 'success'
              });
            }
          })
      }).catch(() => {
        this.$message({
          type: "info",
          message: '已取消删除'
        });
      })
    },
    //新增
    insertOnSubmit: function () {
      let formData = new FormData;
      formData.append("price", this.form.price);
      formData.append("categoryId", this.form.categoryId);
      formData.append("userId", this.form.userId);
      formData.append("comsumeTime", this.form.comsumeTime);
      formData.append('remark', this.form.remark);
      this.$http({
        method: 'post',
        url: 'userFlow/insert',
        headers: {
          "Authorization": sessionStorage.getItem('token')
        },
        data: formData
      }).then(res => {
        if (res.data.code === 200) {
          // 提交成功将要执行的代码
          this.insertDialog = false;

          //刷新列表
          this.getData();
          this.$message({
            showClose: true,
            message: '操作成功',
            type: 'success'
          });
        } else {
          this.$message({
            showClose: true,
            message: '操作失败',
            type: 'success'
          });
        }
      })
    },
    //提交编辑穿
    udpateOnSumbit: function () {
      let formData = new FormData;
      formData.append("price", this.form.price);
      formData.append("categoryId", this.form.categoryId);
      formData.append("comsumeTime", this.form.comsumeTime);
      formData.append('remark', this.form.remark);
      formData.append('id', this.id);
      this.$http({
        method: 'post',
        url: 'userFlow/update',
        headers: {
          "Authorization": sessionStorage.getItem('token')
        },
        data: formData
      }).then(res => {
        if (res.data.code === 200) {
          // 提交成功将要执行的代码
          this.updateDialog = false;
          //刷新列表
          this.getData();
          this.$message({
            showClose: true,
            message: '操作成功',
            type: 'success'
          });
        } else {
          this.$message({
            showClose: true,
            message: '操作失败',
            type: 'success'
          });
        }
      })
    },
    //搜索
    search: function () {
      let formData = new URLSearchParams();
      var arr = this.startTime;
      formData.append("pageIndex", this.currentPage);
      formData.append("pageSize", this.pageSize);
      if (this.categoryId != undefined && this.categoryId != 0) {
        formData.append("categoryId", this.categoryId);
      }
      if (arr != undefined && arr != '') {
        formData.append('startTime', arr[0]);
        formData.append('endTime', arr[1]);
      }
      this.$http({
        method: 'post',
        url: '/userFlow/list',
        headers: {
          "Authorization": sessionStorage.getItem('token')
        },
        data: formData
      }).then(res => {
        var data = res.data.data.data;
        this.tableData = data;
        this.totalCount = res.data.data.totalCount;
      })
    }
  }
}
</script>

<style>
#id {
  width: 217px;
}
</style>
